<!--
 * @Description: lert
 * @Author: 亢超
 * @Date: 2024-11-14 20:22:33
 * @LastEditTime: 2024-11-25 23:16:50
-->
<template>
  <div>
    <el-card>
      <h1>原卷信息</h1>
      <el-table :data="tableData" style="width: 100%" :show-header="false" border>
        <el-table-column prop="cz" label="材质">
          <template slot-scope="scope">
            {{ scope.row.cz + '(' + scope.row.md + ')' }}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="规格">
          <template slot-scope="scope">
            <div>
              <!-- {{ scope.row.hd }}*{{ scope.row.kd }}*{{ scope.row.xz ? scope.row.xz : 'C' }} -->
              {{ scope.row.hd }}*{{ scope.row.kd }}*C
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="xz" label="限重">
          <template slot-scope="scope">
            <div>
              {{ scope.row.xz ? scope.row.xz : 'C' }}
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <div class="btns">
              <el-button @click="handleClick(scope.row, scope.$index, 'update')">编辑</el-button>
              <el-button @click="handleClick(scope.row, scope.$index, 'delete')">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-button style="margin: 10px 0 20px" @click="handleAdd('yj')">+增加原卷</el-button>
      <h1>
        成品信息
        <span style="color: #ff0000; font-size: 16px">注意：条料长度可不填；板料宽长自动互换。</span>
      </h1>
      <el-table :data="tableData1" style="width: 100%" border>
        <!-- <el-table-column prop="hd" label="厚度">
        </el-table-column> -->
        <el-table-column prop="kd" label="规格">
          <template slot-scope="scope">
            <div>
              {{ currentData[0].hd }}*{{ scope.row.kd }}*{{
                scope.row.cd ? scope.row.cd : 'C'
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="gc" label="公差"> </el-table-column>
        <el-table-column prop="xz" label="限重(KG)"> </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <div class="btns">
              <el-button @click="handleClick1(scope.row, scope.$index, 'update')">编辑</el-button>
              <el-button @click="handleClick1(scope.row, scope.$index, 'delete')">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-button style="margin: 10px 0 20px" @click="handleAdd('cp')"
        :disabled="this.tableData.length < 1">+增加成品</el-button>
      <div class="btn">
        <el-button style="width: 100%" size="small" type="primary" block
          :disabled="tableData.length == 0 && tableData1.length == 0" @click="submitData">提交</el-button>
      </div>
      <p class="mark">注意：由于计算的数量较大，等待时间需要：1~2分钟左右</p>
    </el-card>
    <!-- 添加原卷弹窗 -->
    <dialogAlert ref="yjRef" :currentData="currentData" :currentUpdate="currentUpdate" @addSuccess="addSuccess"
      :currentHandler="currentHandler" />
    <!-- 添加成品弹窗 -->
    <cpDialogAlert ref="cpRef" :cpHandler="cpHandler" :currentData="currentData" :currentCpData="currentCpData"
      :currentCpUpdate="currentCpUpdate" @cpAddSuccess="cpAddSuccess" />
  </div>
</template>

<script>
import { zdMessageApi } from '@/api/index.js'
import dialogAlert from './dialogAlert.vue'
import cpDialogAlert from './cpDialogAlert.vue'
export default {
  components: {
    dialogAlert,
    cpDialogAlert,
  },
  data () {
    return {
      // 原卷相关
      tableData: [], //存储数据
      currentData: [], //当前数据
      currentUpdate: {}, //当前需要编辑的值
      updateIndex: null, // 要更新的索引
      currentHandler: 'add', //当前是添加还是编辑
      // 成品相关
      tableData1: [],
      currentCpData: [],
      currentCpUpdate: {},
      updateCpIndex: null,
      cpHandler: 'add',
    }
  },

  methods: {
    handleAdd (type) {
      if (type == 'cp' && this.tableData.length < 1)
        return this.$message.warning('请先添加原卷')
      this.updateIndex = null
      this.updateCpIndex = null
      this.currentCpUpdate = {}
      this.currentUpdate = {}
      if (type == 'cp') {
        this.cpHandler = 'add'
        this.$refs.cpRef.open()
      } else {
        this.currentHandler = 'add'
        this.$refs.yjRef.open()
      }
    },
    addSuccess (obj) {
      if (this.updateIndex != null) {
        this.tableData.map((item, index) => {
          if (index == this.updateIndex) {
            this.$set(this.tableData, this.updateIndex, obj)
          }
        })
      } else {
        obj.id = this.tableData.length + 1
        this.tableData.push(obj)
      }
      this.currentData = JSON.parse(JSON.stringify(this.tableData))
    },
    //删除原卷
    handleClick (row, index, type) {
      if (type == 'delete') {
        if (this.tableData.length > 1) {
          this.tableData = this.tableData.filter((item, key) => key != index)
        } else {
          this.tableData = []
        }
        this.currentData = this.tableData
      } else if (type == 'update') {
        this.currentHandler = 'edit'
        this.currentUpdate = row
        this.updateIndex = index
        this.$refs.yjRef.open()
      }
    },

    cpAddSuccess (obj, currentId) {
      if (currentId != undefined) {
        this.tableData1.map((item, index) => {
          if (item.id == currentId) {
            this.$set(this.tableData1, index, obj)
          }
        })
      } else {
        obj.id = this.tableData1.length + 1
        this.tableData1.push(obj)
      }
      this.currentCpData = JSON.parse(JSON.stringify(this.tableData1))
    },
    //删除成品
    handleClick1 (row, index, type) {
      if (type == 'delete') {
        if (this.tableData1.length > 1) {
          this.tableData1 = this.tableData1.filter((item, key) => key != index)
        } else {
          this.tableData1 = []
        }
        this.currenCptData = this.tableData1
      } else if (type == 'update') {
        this.cpHandler = 'edit'
        this.currentCpUpdate = row
        this.updateCpIndex = index
        this.$refs.cpRef.open()
      }
    },
    //提交数据
    async submitData () {
      let currentYj = []
      let currentCp = []
      this.$store.commit('SET_YJDATA', this.tableData)
      this.$store.commit('SET_CPDATA', this.tableData1)
      this.tableData.map((item) => {
        currentYj.push({
          steelType: `${item.cz}(${item.md})`,
          size: `${item.hd}*${item.kd}*${item.xz}`,
          weight: `${item.xz}`,
        })
      })
      this.tableData1.map((item) => {
        currentCp.push({
          width: item.kd,
          length: item.cd ? item.cd : 'C',
          tolerance: item.gc,
          weight: item.xz,
        })
      })
      let params = {
        material: JSON.stringify(currentYj),
        produce: JSON.stringify(currentCp),
        companyConfig: JSON.stringify(this.$store.state.companyConfig),
      }
      zdMessageApi(params).then((res) => {
        if (res.code == 200) {
          this.$store.commit('SET_SIZE_MEET', res.data)
          this.$router.push({
            name: 'toolAssembly',
          })
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
h1 {
  font-size: 40px;
  font-weight: bold;
  margin-bottom: 10px;
}

.btns {
  display: flex;
  align-items: center;
}

el-button {}

div.btn {
  width: 300px;
  margin: 0 auto 10px;
}

p.mark {
  text-align: right;
  color: #ff0000;
  padding-bottom: 20px;
}
</style>
